import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core';

declare var Viewer: any;

interface Style {
    left: String,
    transform: String
}

interface ImageType{
  url: string
  index: number
}

@Component({
    selector: 'sa-image-browse',
    templateUrl: './imageBrowse.component.html',
    styleUrls: ['./imageBrowse.component.css'],
})

export class ImageBrowseComponent implements OnInit{
    @Output() switchTab = new EventEmitter()
    @Input() imageList: ImageType[] = [] // 缩略图列表
    @Input() currentImageUrl: String = '' // 当前图片URL
    @Input() mainImageHeight: String = '500px' // 主图高度
    @Input() mainImageWidth: String = '762px' // 主图宽度
    currentImageIndex: Number = 0 // 当前图片index
    currentImageListStyle: Style = { // 图片容器样式
        left: '50%',
        transform: 'translateX(-50%)'
    }
    btnIcon = [require('./icon/left-arrow.png'), require('./icon/right-arrow.png')]
    noDataIcon = require('./icon/no-data.png')
    isViewer: boolean = false; //默认隐藏
    //显示图片组件
	viewer: any='';
    ngOnInit() {
        this.clickShowImg()
    }

    ngOnChanges() {
        this.currentImageIndex = -1
        for (let i = 0; i < this.imageList.length; i++) {
          if (this.currentImageUrl === this.imageList[i].url) {
            this.currentImageIndex = i
          }
        }
        this.isNeedCentered()
    }

    ngAfterViewInit() {
    }

    /*
    * @des: 切换图片(直接点击图片，或者点击上一个、下一个按钮)
    * @param: index:(Number) 切换的图片在数组中的角标
    * @return: null
    **/
    switchImage(index) {
      if (index === -1 || index > this.imageList.length - 1) return
      this.currentImageIndex = index
      this.switchTab.emit(this.imageList[index].index)
      if (this.isNeedCentered()) return
      if (index < 3) return
      else if (index >= this.imageList.length - 1 - 2) {
        this.currentImageListStyle.left = `-${(this.imageList.length - 1 - 6) * 110}px`
      } else {
        this.currentImageListStyle.left = `-${(index - 3) * 110}px`
      }
    }

    /*
    * @des: 图片总数是否超过容器宽度，决定是否需要居中显示
    * @return: boolean
    **/
    isNeedCentered() {
        if (this.imageList.length > 7) {
            this.currentImageListStyle = {
                left: '0px',
                transform: 'translateX(0px)'
            }
            return false
        }
        return true
    }

    async imagePreview() {
        const imgList = $(".main-image")[0]
        if ($(".viewer-container").length < 1) {
            await System.import('assets/js/viewer/viewer.js')
            await System.import('assets/js/viewer/bootstrap.bundle.min.js')
            await System.import('assets/js/viewer/viewer.css')
        }
        new Viewer(imgList, {
            url: 'src'
        })
    }

    clickShowImg() {
        if(!this.isViewer && $(".viewer-container").length == 0){
			System.import('assets/js/viewer/viewer.js').then(
				()=>{System.import('assets/js/viewer/bootstrap.bundle.min.js').then(
					()=>{System.import('assets/js/viewer/viewer.css').then(()=>{
						this.showImg();
					})
				})
			})
		}else{
			this.showImg();
		}
    }

    showImg(){
		var that = this;
		var imgList
		imgList = $(".main-image")[0];
		this.viewer = new Viewer(imgList, {
			url: 'src',
			title: function (image) {
				return image.alt + ' (' + (this.index + 1) + '/' + this.length + ')' ;
			},
		});
		that.isViewer = true
	}

    ngOnDestroy() {
        if(this.isViewer && $(".viewer-container").length >0){
            this.isViewer = false;
            $('.viewer-container').empty();
            $('.viewer-container').remove();
            this.viewer.destroy();
        }
    }

}